// width
$width-max:76.7rem;
$width-dialog:36rem;
// height
$height-max:98%;
$height-high:9.6rem;
$height-regular:4.8rem;
$height-low:4.8rem;
$height-gap:2.4rem;
// padding
$padding-normal:1.6rem;
$padding-half:0.8rem;
$padding-quarter:0.4rem;
//bg-color
$bg-color-alert: #fde0dc;
$bg-color-front:#fafafa;
$bg-color-back:#eeeeee;
//color
$color-theme: #9cca48;
$color-primary:#424242;
$color-secondary:#9e9e9e;
$color-light:#bdbdbd;
$color-reverse:#ffffff;
// radius
$radius-s:0.4rem;
$radius-m:0.8rem;
$radius-l:50%;
// font-size
$font-size-big:1.8rem;
$font-size-default:1.4rem;
$font-size-small:1.2rem;
$font-size-tiny:1rem;
// time
$presto:120ms;
$vivo:200ms;
$largo:800ms;
// shade
.shade-as-list {
    > * {
        box-shadow: 1px 1px 2px white inset;
        border-bottom: 1px solid #d7d7d7;
        &:last-child {
            border-bottom: none;
        }
    }
}

.shade-as-card {
    border-radius: $radius-m;
    background-color: $bg-color-front;
    box-shadow: 1px 1px 2px #9e9e9e;
    overflow: hidden;
}

.shade-as-cut {
    background-color: $bg-color-front;
    border-radius: $radius-m;
    box-shadow: 1px 1px 2px white;
    border: 1px solid #d7d7d7;
    overflow: hidden;
    > *:last-child {
        border-bottom: none;
    }
}

// layout
.layout-v {
    display: flex;
    -webkit-box-direction: vertical;
    -webkit-box-orient: vertical;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    > * {
        flex-grow: 0;
    }
    > content {
        flex-grow: 1;
        min-height: $height-regular;
    }
}

.layout-h {
    display: flex;
    -webkit-box-direction: horizontal;
    -webkit-box-orient: horizontal;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    /*纵向居中*/
    -webkit-box-align: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    align-items: center;
    >* {
        flex-grow: 1;
        padding: 0 $padding-half;
        height: $height-regular;
        line-height: $height-regular;
        &:last-child {
            padding-right: $padding-normal;
        }
        &:first-child {
            padding-left: $padding-normal;
        }
    }
    > label,
    button {
        flex-grow: 0;
    }
}

.layout-t {
    display: flex;
    flex-wrap: wrap;
    /*横向显示*/
    -webkit-box-direction: horizontal;
    -webkit-box-orient: horizontal;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    >* {
        flex-grow: 0;
        width: 25%;
    }
}

.layout-f {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.fa {
    font-size: $font-size-big;
    vertical-align: ($font-size-default - $font-size-big)/4;
}
